<div class="non-autoplay-gifv  {$largeInlineMedia ? '' : 'non-autoplay-gifv-fixed-size'}"
     {style}
     on:mouseover="onMouseOver(event)"
     ref:node
>
  {#if playing}
    <AutoplayVideo
      ariaLabel={label}
      {poster}
      {src}
      {width}
      {height}
      {focus}
      />
  {:else}
    <LazyImage
      alt={label || ''}
      title={label || ''}
      src={staticSrc}
      {blurhash}
      fallback={oneTransparentPixel}
      {width}
      {height}
      background="var(--loading-bg)"
      {focus}
    />
  {/if}
  {#if !blurhash}
    <PlayVideoIcon className={playing ? 'hidden' : ''}/>
  {/if}
</div>
<style>
  .non-autoplay-gifv {
    cursor: zoom-in;
    display: flex;
    position: relative;
    margin: 0;
    padding: 0;
  }

  .non-autoplay-gifv-fixed-size {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }


  :global(.non-autoplay-gifv .play-video-icon) {
    transition: opacity 0.2s linear;
  }
</style>
<script>
  import { mouseover } from '../_utils/events.js'
  import PlayVideoIcon from './PlayVideoIcon.html'
  import { ONE_TRANSPARENT_PIXEL } from '../_static/media.js'
  import LazyImage from './LazyImage.html'
  import AutoplayVideo from './AutoplayVideo.html'

  export default {
    methods: {
      onMouseOver (mouseOver) {
        this.set({ playing: mouseOver })
      }
    },
    events: {
      mouseover
    },
    data: () => ({
      oneTransparentPixel: ONE_TRANSPARENT_PIXEL,
      focus: undefined
    }),
    computed: {
      style: ({ useWidthHeight, width, height }) => (
        useWidthHeight ? `width: ${width}px; height: ${height}px;` : ''
      )
    },
    components: {
      PlayVideoIcon,
      LazyImage,
      AutoplayVideo
    }
  }
</script>
